<template>
  <section class="consult">
    <span>标记*为必填项</span>
    <form class="inp" @submit.prevent="handleInput">
      <div>
        <label><span>*</span>姓名</label>
        <input type="text" v-model="customer.name" placeholder="姓名"/>
      </div>
      <div>
        <label><span>*</span>电话</label>
        <input type="number" v-model="customer.phone" placeholder="电话"/>
      </div>
      <div>
        <label><span>*</span>开业地区</label>
        <input type="text" v-model="customer.address" placeholder="开业地区"/>
      </div>
      <div>
        <label><span>*</span>有效时间</label>
        <p class="time">
          <span
            v-for="item of time"
            :key="item.id"
            @click="handleDate(item.id)"
            :class="{active1: num1 === item.id}"
          >
            {{item.date}}
          </span>
        </p>
      </div>
      <div>
        <label><span>*</span>产品版本</label>
        <p class="time">
          <span
            v-for="item of product"
            :key="item.id"
            @click="handleProduct(item.id)"
            :class="{active1: arr.includes(item.id)}"
          >
            {{item.names}}
          </span>
        </p>
      </div>
      <div class="but">
        <button type="submit">提交</button>
      </div>

    </form>
  </section>
</template>

<script>
export default {
  name: 'ConsultSon',
  data () {
    return {
      time: [
        {
          date: '半年',
          id: 0
        },
        {
          date: '一年',
          id: 1
        },
        {
          date: '俩年',
          id: 2
        }
      ],
      times: '',
      num1: 0,
      product: [
        {
          names: '客户版',
          id: 0
        },
        {
          names: '代理商版',
          id: 1
        },
        {
          names: '专家版本',
          id: 2
        }
      ],
      arr: [0],
      products: {},
      customer: {}
    }
  },
  created () {
    this.times = this.time[this.num1].date
    this.products = this.product[this.num1].names
  },
  methods: {
    handleDate (id) {
      this.num1 = id
      this.times = this.time[id].date
      console.log(this.times)
    },
    handleProduct (id) {
      if (this.arr.includes(id)) { // ES6，Array.includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
        this.arr = this.arr.filter((e) => { // filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
          return e !== id
        })
      } else {
        this.arr.push(id)
        this.products = this.product[id].names
        console.log(this.products)
      }
    },
    handleInput (w) {
      console.log(w)
      if (!this.customer.name && !this.customer.phone && !this.customer.address) {
        alert('请输入当前对应的内容！')
      } else {
        let customer = {
          name: this.customer.name,
          phone: this.customer.phone,
          address: this.customer.address,
          time: this.times,
          product: this.products
        }
        this.axios.post('/consultTermTable', customer) // axios提交内容 post
          .then((res) => {
            console.log(res)
            this.$router.push({ path: '/consult/term', query: { alert: '信息更新成功！' } })
          })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .active1
    background #4fc08d
    color #fff!important
  .consult
    position relative
    width 100%
    height 100vh
    background #fff
    padding 2px 25px
    box-sizing border-box
    span
      font-size 20px
      color #c2c2c2
    .inp
      div
        width 100%
        display flex
        align-items center
        justify-content center
        margin 5% 0
        label
          width 20%
          font-size 28px
          color #555
          span
            color #e45b70
            margin-right 2px
        input
          width 80%
          border 1px solid #ccc
          padding 17px 20px
          color #555
          font-size 30px
        .time
          width 80%
          display flex
          align-items center
          justify-content center
          span
            display inline-block
            border 2px solid #e3e3e3
            color #555
            width 20%
            height 50px
            line-height 50px
            padding 0 8px
            margin-right 5%
            border-radius 3px
            text-align center
    .but
      width 100%
      text-align center
      margin 0 auto
      button
        color #fff
        font-size 33px
        background-color #5cb85c
        padding 20px 300px
        border-radius 6px
        margin 50px auto 0
        border-color #4cae4c

  </style>
